{% extends "base.html" %}

{% block title %}项目仪表板 - LandPPT{% endblock %}

{% block extra_css %}
<style>
/* 仪表板：黑白玻璃风格 */
.dashboard-hero {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(17, 17, 17, 0.08);
    color: var(--text-primary);
    padding: var(--spacing-lg) var(--spacing-md);
    margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-lg) calc(-1 * var(--spacing-lg));
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.dashboard-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 20%, rgba(17, 17, 17, 0.06), transparent 60%),
                radial-gradient(circle at 80% 80%, rgba(17, 17, 17, 0.04), transparent 55%);
    mix-blend-mode: multiply;
}

.dashboard-hero h2 {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.01em;
}

.dashboard-hero p {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stat-card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(17, 17, 17, 0.06), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 52px rgba(15, 23, 42, 0.12);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--spacing-sm);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(17, 17, 17, 0.08);
    color: var(--surface-contrast);
    font-size: 1.4rem;
}

.stat-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: var(--spacing-xs);
}

.stat-number {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--surface-contrast);
    margin-bottom: var(--spacing-xs);
}

.stat-help {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.quick-actions {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.action-buttons {
    display: inline-flex;
    gap: var(--spacing-sm);
    background: rgba(17, 17, 17, 0.04);
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    backdrop-filter: blur(12px);
    flex-wrap: wrap;
    justify-content: center;
}

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.action-button.primary {
    background: var(--surface-contrast);
    color: var(--surface);
    border-color: rgba(17, 17, 17, 0.9);
}

.action-button.secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: rgba(17, 17, 17, 0.18);
}

.action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
}

.recent-projects {
    margin-bottom: var(--spacing-lg);
}

.recent-projects-header {
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.recent-projects-list {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.1);
    overflow: hidden;
}

.project-list-item {
    position: relative;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    transition: transform 0.3s ease, background 0.3s ease;
}

.project-list-item:last-child {
    border-bottom: none;
}

.project-list-item:hover {
    transform: translateX(6px);
    background: rgba(17, 17, 17, 0.04);
}

.project-status-indicator {
    width: 4px;
    height: 42px;
    border-radius: 2px;
    background: rgba(17, 17, 17, 0.28);
    flex-shrink: 0;
}

.project-info {
    flex: 1;
    min-width: 0;
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.project-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-status-badge {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(17, 17, 17, 0.05);
    border: 1px solid rgba(17, 17, 17, 0.12);
    color: var(--text-secondary);
}

.project-meta {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--text-muted);
}

.project-meta span {
    display: inline-flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.project-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
}

.project-action-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.project-action-btn.primary {
    background: var(--surface-contrast);
    border-color: rgba(17, 17, 17, 0.85);
    color: var(--surface);
}

.project-action-btn.secondary {
    background: transparent;
    border-color: rgba(17, 17, 17, 0.18);
    color: var(--text-primary);
}

.project-action-btn.destructive {
    background: transparent;
    border-color: rgba(17, 17, 17, 0.18);
    color: var(--surface-contrast);
}

.project-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.empty-state {
    text-align: center;
    padding: 60px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(17, 17, 17, 0.06);
    box-shadow: 0 24px 46px rgba(15, 23, 42, 0.1);
}

.empty-state h3 {
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.empty-state p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.todo-section {
    margin-bottom: var(--spacing-lg);
}

.todo-section h3 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.progress-track {
    background: rgba(17, 17, 17, 0.05);
    border-radius: 10px;
    overflow: hidden;
    height: 8px;
}

.progress-track span {
    display: block;
    height: 100%;
    background: rgba(17, 17, 17, 0.45);
}

.modal-surface {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 15px;
    border: 1px solid rgba(17, 17, 17, 0.1);
    box-shadow: 0 32px 70px rgba(15, 23, 42, 0.22);
    max-width: 500px;
    width: 90%;
    text-align: center;
    padding: 32px;
}

.modal-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(17, 17, 17, 0.15);
    border-top: 4px solid var(--surface-contrast);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .dashboard-hero {
        padding: var(--spacing-md) var(--spacing-sm);
        margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-sm)) var(--spacing-md) calc(-1 * var(--spacing-sm));
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

    .stat-card {
        padding: var(--spacing-md);
    }

    .project-list-item {
        padding: var(--spacing-md);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .project-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .project-meta {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .project-actions {
        width: 100%;
        justify-content: flex-start;
    }
}
</style>
{% endblock %}

{% block content %}
<div id="dashboardRoot" data-in-progress="{{ in_progress_projects }}">
<div class="dashboard-hero">
    <h2>项目仪表板</h2>
    <p>管理您的 PPT 项目，跟踪进度，查看 TODO 看板</p>
</div>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-layer-group"></i></div>
        <h3 class="stat-title">总项目数</h3>
        <div class="stat-number">{{ total_projects }}</div>
        <p class="stat-help">所有项目</p>
    </div>

    <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
        <h3 class="stat-title">已完成</h3>
        <div class="stat-number">{{ completed_projects }}</div>
        <p class="stat-help">完成的项目</p>
    </div>

    <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-spinner"></i></div>
        <h3 class="stat-title">进行中</h3>
        <div class="stat-number">{{ in_progress_projects }}</div>
        <p class="stat-help">当前正在处理</p>
    </div>

    <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-file-alt"></i></div>
        <h3 class="stat-title">草稿</h3>
        <div class="stat-number">{{ draft_projects }}</div>
        <p class="stat-help">草稿状态</p>
    </div>
</div>

<div class="quick-actions">
    <div class="action-buttons">
        <a href="/scenarios" class="action-button primary">
            创建新项目
        </a>
        <a href="/projects" class="action-button secondary">
            查看所有项目
        </a>
    </div>
</div>

<div class="recent-projects">
    <h3 class="recent-projects-header">最近项目</h3>

    {% if recent_projects %}
    <div class="recent-projects-list">
        {% for project in recent_projects %}
        <div class="project-list-item {{ project.status }}">
            <div class="project-status-indicator"></div>
            <div class="project-info">
                <div class="project-header">
                    <h4 class="project-title">{{ project.title }}</h4>
                    <span class="project-status-badge" data-status="{{ project.status }}">
                        {% if project.status == 'completed' %}
                            已完成
                        {% elif project.status == 'in_progress' %}
                            进行中
                        {% elif project.status == 'draft' %}
                            草稿
                        {% else %}
                            异常状态
                        {% endif %}
                    </span>
                </div>

                <div class="project-meta">
                    <span>
                        <i class="fas fa-clone" aria-hidden="true"></i>
                        <span>场景: {{ project.scenario }}</span>
                    </span>
                    <span>
                        <i class="fas fa-clock" aria-hidden="true"></i>
                        <span>创建时间: {{ project.created_at | strftime('%Y-%m-%d %H:%M') }}</span>
                    </span>
                </div>

                <div class="project-actions">
                    <a href="/projects/{{ project.project_id }}" class="project-action-btn primary">
                        <i class="fas fa-eye"></i>
                        查看详情
                    </a>
                    {% if project.status == 'completed' %}
                    <a href="/projects/{{ project.project_id }}/edit" class="project-action-btn secondary">
                        <i class="fas fa-pen"></i>
                        编辑 PPT
                    </a>
                    <a href="/projects/{{ project.project_id }}/fullscreen" class="project-action-btn secondary" target="_blank">
                        <i class="fas fa-expand"></i>
                        打开预览
                    </a>
                    {% endif %}
                    <button onclick="confirmDeleteProject('{{ project.project_id }}', '{{ project.title }}')"
                            class="project-action-btn destructive"
                            title="删除项目">
                        <i class="fas fa-trash-alt"></i>
                        删除
                    </button>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <h3>暂无项目</h3>
        <p>开始创建您的第一个 PPT 项目</p>
        <a href="/scenarios" class="btn btn-primary">创建项目</a>
    </div>
    {% endif %}
</div>

{% if active_todo_boards %}
<div class="todo-section">
    <h3>活跃的 TODO 看板</h3>

    <div class="grid">
        {% for todo_board in active_todo_boards %}
        <div class="card">
            <h4 style="margin-bottom: var(--spacing-sm);">{{ todo_board.title }}</h4>

            <div style="margin-bottom: var(--spacing-sm);">
                <div class="progress-track" data-progress="{{ todo_board.overall_progress }}">
                    <span></span>
                </div>
                <p style="text-align: center; margin-top: 8px; color: var(--text-muted); font-size: 0.9em;">
                    进度: {{ "%.1f" | format(todo_board.overall_progress) }}%
                </p>
            </div>

            <div style="margin-bottom: var(--spacing-md); color: var(--text-secondary);">
                <strong>当前阶段:</strong>
                <span>{{ todo_board.stages[todo_board.current_stage_index].name }}</span>
            </div>

            <div style="text-align: center;">
                <a href="/projects/{{ todo_board.task_id }}/todo" class="btn btn-primary">
                    查看看板
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

</div>

<div id="deleteModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; padding: var(--spacing-lg);">
    <div class="modal-surface">
        <h3 style="color: var(--text-primary); margin-bottom: var(--spacing-sm);">确认删除项目</h3>
        <p style="color: var(--text-secondary); margin-bottom: var(--spacing-md);">
            您确定要删除项目 "<span id="deleteProjectTitle" style="font-weight: bold;"></span>" 吗？
        </p>
        <p style="color: var(--text-muted); font-size: 0.9em; margin-bottom: var(--spacing-lg);">
            此操作不可撤销，将永久删除项目及其相关数据。
        </p>
        <div class="modal-actions">
            <button onclick="closeDeleteModal()" class="btn btn-secondary" style="padding: 12px 24px;">
                取消
            </button>
            <button onclick="executeDeleteProject()" class="btn btn-primary" style="padding: 12px 24px;">
                确认删除
            </button>
        </div>
    </div>
</div>

<div id="loadingOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1001; align-items: center; justify-content: center; padding: var(--spacing-lg);">
    <div class="modal-surface" style="max-width: 360px;">
        <div class="spinner" style="margin-bottom: 20px;"></div>
        <p style="color: var(--text-primary); font-weight: 600;">正在删除项目...</p>
    </div>
</div>
{% endblock %}

<style>
.btn-danger {
    background: var(--surface-contrast) !important;
    color: var(--surface) !important;
    border: 1px solid rgba(17, 17, 17, 0.9) !important;
}

.btn-danger:hover {
    opacity: 0.92;
}
</style>

{% block extra_js %}
<script>
let currentDeleteProjectId = null;

function confirmDeleteProject(projectId, projectTitle) {
    currentDeleteProjectId = projectId;
    const titleElement = document.getElementById('deleteProjectTitle');
    if (titleElement) {
        titleElement.textContent = projectTitle;
    } else {
        console.error('Element with id "deleteProjectTitle" not found');
    }
    const modalElement = document.getElementById('deleteModal');
    if (modalElement) {
        modalElement.style.display = 'flex';
    } else {
        console.error('Element with id "deleteModal" not found');
    }
}

function closeDeleteModal() {
    const modalElement = document.getElementById('deleteModal');
    if (modalElement) {
        modalElement.style.display = 'none';
    }
    currentDeleteProjectId = null;
}

async function executeDeleteProject() {
    if (!currentDeleteProjectId) return;

    // Show loading overlay
    const modalElement = document.getElementById('deleteModal');
    if (modalElement) {
        modalElement.style.display = 'none';
    }
    const loadingElement = document.getElementById('loadingOverlay');
    if (loadingElement) {
        loadingElement.style.display = 'flex';
    }

    try {
        const response = await fetch(`/api/database/projects/${currentDeleteProjectId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            }
        });

        const result = await response.json();

        if (response.ok) {
            // Show success message
            showNotification('项目删除成功！', 'success');

            // Refresh the page after a short delay
            setTimeout(() => {
                window.location.reload();
            }, 1500);
        } else {
            throw new Error(result.detail || '删除失败');
        }

    } catch (error) {
        console.error('Delete error:', error);
        showNotification('删除失败：' + error.message, 'error');
        const loadingElement = document.getElementById('loadingOverlay');
        if (loadingElement) {
            loadingElement.style.display = 'none';
        }
    }

    currentDeleteProjectId = null;
}

function showNotification(message, type = 'info') {
    // Create notification element
    const notification = document.createElement('div');
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px 25px;
        border-radius: 8px;
        color: white;
        font-weight: bold;
        z-index: 1002;
        max-width: 400px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        transform: translateX(100%);
        transition: transform 0.3s ease;
    `;

    // Set background color based on type
    if (type === 'success') {
        notification.style.background = '#1f2933';
    } else if (type === 'error') {
        notification.style.background = '#111827';
    } else {
        notification.style.background = '#334155';
    }

    notification.textContent = message;
    document.body.appendChild(notification);

    // Animate in
    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 100);

    // Auto remove after 3 seconds
    setTimeout(() => {
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 300);
    }, 3000);
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    // Close modal when clicking outside
    const deleteModal = document.getElementById('deleteModal');
    if (deleteModal) {
        deleteModal.addEventListener('click', function(e) {
            if (e.target === this) {
                closeDeleteModal();
            }
        });
    }

    // Close modal with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeDeleteModal();
        }
    });

    // Add smooth animations
    const cards = document.querySelectorAll('.card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        setTimeout(() => {
            card.style.transition = 'all 0.5s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, index * 100);
    });

    const progressTracks = document.querySelectorAll('.progress-track[data-progress]');
    progressTracks.forEach(track => {
        const value = Number(track.dataset.progress || 0);
        const bar = track.querySelector('span');
        if (bar) {
            bar.style.width = `${Math.max(0, Math.min(100, value))}%`;
        }
    });
});

// Auto-refresh dashboard data every 30 seconds
setInterval(function() {
    const dashboardRoot = document.getElementById('dashboardRoot');
    if (!dashboardRoot) {
        return;
    }
    const inProgressCount = Number(dashboardRoot.dataset.inProgress || 0);
    if (inProgressCount > 0) {
        window.location.reload();
    }
}, 30000);
</script>
{% endblock %}
